<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <style type="text/css">
        #main{
            margin-top:50px;

        }
    </style>
</head>
<body>

<div id="main">
    <form id="form">
        <div class="form-group row">
            <label class="col-form-label col-1 text-center">账号：</label>
            <div class="col-8">
                <input type="text" name="loginName" class="form-control">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-form-label col-2 text-center"></label>
            <div class="col-8">
                <button type="button" id="btnSearch" class="btn btn-lg btn-success">找回密码</button>
                <a class="btn btn-lg btn-primary" href="login.html" role="button">返回登录</a>
            </div>
        </div>
    </form>
    <div id="center">
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>

                <td>账号</td>
                <td>密码</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody">

            <tr>
                <td colspan="4" class="text-center">账号不存在</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editform">

                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">账号：</label>
                        <div class="col-8">
                            <input type="text" id="editLoginName" name="loginName" class="form-control"
                                   placeholder="用户账号">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">密码：</label>
                        <div class="col-8">
                            <input type="password" id="editLoginPwd" name="loginPwd" class="form-control"
                                   placeholder="用户密码">
                        </div>
                    </div>
                    <!-- 存放要修改数据的主键值，作为条件使用 -->
                    <input type="hidden" name="userId" id="editUserId">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doEdit()">保存</button>
            </div>
        </div>
    </div>
</div>
<!--<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">-->
<!--    <div class="modal-dialog">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <h5 class="modal-title" id="delModalLabel">提示</h5>-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--                    <span aria-hidden="true">&times;</span>-->
<!--                </button>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                您确定要删除【<span id="delLoginName"></span>】吗?-->
<!--                <form id="delForm">-->
<!--                    <input type="hidden" name="ids" id="delUserId">-->
<!--                </form>-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>-->
<!--                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
</body>
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#btnSearch").click(function () {
            init();
        });
    })
    jQuery(function () {
        jQuery("#btn").click(function () {

        });
    })
</script>
<script>
    function init()
    {
        let form=jQuery("#form").serialize();
        jQuery.post("user/search1",form,function (rst) {
            let trs='';
            let u=rst[0];
                trs+=`
            <tr>
            <td>${u.loginName}</td>
            <td>${u.loginPwd}</td>
            <td>${u.userStatus==1?'存在':'已注销'}</td>

            <td>

<a href="#" onclick='showEditDialog(${JSON.stringify(u)})'>修改</a>

                            </td>
           </tr>
            `;

        if(trs.length==0)
        {
            trs=`
                         <tr>
                            <td colspan="4" class="text-center">账号不存在</td>
                        </tr>
                    `;
        }
            jQuery("#tbody").html(trs);

        })
    }

    function showEditDialog(user)
    {
        jQuery("#editUserId").val(user.userId);

        jQuery("#editLoginName").val(user.loginName);
        jQuery("#editLoginPwd").val(user.loginPwd);

        jQuery("#editModal").modal("show");
    }

    function doEdit() {
        let form=jQuery("#editform").serialize();
        jQuery.post("user/edit",form,function (rst) {
            if(rst>0)
            {
                jQuery("#editModal").modal("hide");
                alert("修改成功！");
                init();
            }else{
                alert("修改失败！");
            }
        })
    }

    // function showDeleteDialog(user) {
    //     console.log(user);
    //     jQuery("#delLoginName").html(user.loginName);
    //     jQuery("#delUserId").val(user.userId);
    //     jQuery("#delModal").modal('show');
    // }
    // function doDelete() {
    //     let form=jQuery("#delForm").serialize();
    //     jQuery.post("user/delete",form,function (rst) {
    //         if(rst>0)
    //         {
    //             alert("删除成功！");
    //             init();
    //         }else{
    //             alert("删除失败！");
    //         }
    //     });
    //     jQuery("#delModal").modal('hide');
    // }
</script>


</html>